<script setup lang="ts">
interface Props {
   modelValue?: boolean;

}

interface Emits {
   (e: "update:modelValue", checked: boolean): void;
   (e: "change", checked: boolean): void;
}

const props = defineProps<Props>();
const emits = defineEmits<Emits>();
const changeChecked = () => {
   emits("update:modelValue", !props.modelValue);
   emits("change", !props.modelValue);
};

</script>

<template>
   <div class="checkbox" @click="changeChecked">
      <i v-if="modelValue" class="iconfont icon-checked"></i>
      <i v-else class="iconfont icon-unchecked"></i>
      <span v-if="$slots.default">
         <slot></slot>
      </span>
   </div>
</template>

<style scoped lang="less">
.checkbox {
   display: inline-block;
   margin-right: 2px;
   cursor: pointer;

   .icon-checked {
      color: @xtxColor;

      ~ span {
         color: @xtxColor;
      }
   }

   i {
      position: relative;
      top: 1px;
   }

   span {
      margin-left: 2px;
   }
}
</style>
